
import { CommonUtil } from "../../../util/common-util";
import { ShapeBox } from "./component-related/shape-box-interface";
import { BoxStyle } from "./component-related/box-style-model";
import { PointStyle } from "../point-model/point-related/point-style";
import { PointInterface } from "../point-model/point-related/point-interface";
import { ShapeBoxBase } from "./component-related/box-base";
import { RotatePoint } from "../point-model/rotate-point";
import { PointBase } from "../point-model/point-related/point-base";

export class SelectBox extends ShapeBoxBase implements ShapeBox {
    id: string;
    style: BoxStyle;
    ctx: CanvasRenderingContext2D;
    genPoints() {
        this.points = [this.genCtlPoints(), [], this.genRtPoints()];
    }
    out() { }
    select(e) {
        super.select(e);
        for (let box of this.boxService.selectedBox) {
            box.select(e);
        }
        this.render();
    }
    calStyle() {
        this.style["z-index"] = this.boxService.boxs.length;
        this.style.display = "block";
        let padding = 0;
        if (this.boxService.selectedBox.length == 1) {
            let box = this.boxService.selectedBox[0];
            this.style.left = box.style.left;
            this.style.top = box.style.top;
            this.style.rwidth = box.style.rwidth;
            this.style.rheight = box.style.rheight;
            this.style.width = box.style.width;
            this.style.height = box.style.height;
            this.style.deg = box.style.deg;
            return;
        }
        let style = null;
        padding = 2;
        for (let box of this.boxService.selectedBox) {
            let nw = {
                left: CommonUtil.px2num(box.style.left),
                top: CommonUtil.px2num(box.style.top)
            };
            let fourP = {
                left: nw.left - padding,
                top: nw.top - padding,
                right: nw.left + box.getWidth() + padding,
                bottom: nw.top + box.getHeight() + padding
            }
            if (!style) {
                style = fourP;
            } else {
                style.left = Math.min(style.left, fourP.left);
                style.top = Math.min(style.top, fourP.top);
                style.right = Math.max(style.right, fourP.right);
                style.bottom = Math.max(style.bottom, fourP.bottom);
            }
        }
        this.style.left = style.left + "px";
        this.style.top = style.top + "px";
        this.style.rwidth = style.right - style.left;
        this.style.rheight = style.bottom - style.top;
        this.style.width = this.style.rwidth + "px";
        this.style.height = this.style.rheight + "px";
        this.style.deg = 0;
    }
    paint() {
        super.paint();
        let width = this.getWidth();
        let height = this.getHeight();

        let keyPoints = [{
            left: width / 2, top: height / 2
        }, {
            left: (width - this.style.rwidth) / 2, top: (height - this.style.rheight) / 2
        }]
        this.setCanvasPadding(keyPoints);

        let ctx: CanvasRenderingContext2D = this.ctx;
        CommonUtil.lineWidthHandler(ctx, this.style.lineWidth);
        ctx.fillStyle = this.style.bgColor;
        ctx.strokeStyle = this.style.color;
        ctx.beginPath();
        ctx.rect(keyPoints[1].left, keyPoints[1].top, this.style.rwidth, this.style.rheight);
        ctx.closePath();
        ctx.stroke();
        if (this.oldStyle && this.style.deg != this.oldStyle.deg) {
            let center = {
                x: CommonUtil.px2num(this.oldStyle.width) / 2 + CommonUtil.px2num(this.oldStyle.left),
                y: CommonUtil.px2num(this.oldStyle.height) / 2 + CommonUtil.px2num(this.oldStyle.top),
                rotate: this.style.deg - this.oldStyle.deg
            };
            for (let box of this.boxService.selectedBox) {
                box.rotate(center);
            }
        } else if (this.scaleData && this.oldStyle && (this.style.rwidth != this.oldStyle.rwidth || this.style.rheight != this.oldStyle.rheight)) {
            for (let box of this.boxService.selectedBox) {
                box.scale(this.scaleData);
            }
        }
    }
    render() {
        if (this.boxService.selectedBox.length == 0) {
            this.style.display = "none";
            this.allPoints(false);
            return;
        }
        this.calStyle();
        this.oldStyle = JSON.parse(JSON.stringify(this.style));
        this.allPoints(true);
        this.renderPoints();
        this.paint();
    }
    move(e) {
        let mv = this.getMovement(e);
        let change = this.getMoveResult(mv);
        for (let i in change) {
            this.style[i] = change[i];
            this.renderPoints();
        }
        for (let box of this.boxService.selectedBox) {
            let c = box.getMoveResult(mv);
            for (let i in c) {
                box.style[i] = c[i];
                box.renderPoints();
            }
        }
    }
    // canvasMove(e) {
    //     if (this.boxService.selectedBox.length == 1) {
    //         this.boxService.selectedBox[0].canvasMove(e);
    //     } else {
    //         super.canvasMove(e);
    //         if (this.boxService.cursor() != "move") {
    //             this.boxService.cursor("default");
    //         }
    //     }
    // }
    constructor(data) {
        super(data);
        this.style.color = "#883333";
        this.style.lineWidth = 1;
    }
}